import { useEffect, useState, Key } from 'react'

import { useNavigate } from 'react-router-dom';

import { Button, Form, Input, Table, Card, message, Tooltip } from 'antd';
//图标
import { SearchOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons"
import style from "./index.module.css"
//引入api中医院列表设置的请求
import {
  getHosSetListRequest,
  // addHospitalRequest
  deleteHosSetRequest,
  allDeleteRequest
} from '@/api/hospital/hospitalSet';
//医院列表数据类型
import { getHosSetListRecordsType } from '@api/hospital/model/hospitalSetTypes'
//查询医院类型
import { searchHosFinisValuesType } from './types'

export default function HospitalSet() {


  // //渲染列表函数
  // const getHosSetList = async () => {
  //   const result = await getHosSetListRequest({
  //     //请求的页码
  //     page: current,
  //     //请求的页码的数量
  //     limit: pageSize,
  //     //查询输入框的
  //     ...fieldValue
  //   });
  //   // console.log(result, "result");

  //   //1.把得到的结果中records数据(医院列表的数组)设置给state
  //   setTableData(result.records)
  //   //2.把得到的结果中 数据的总长度设置给state
  //   setTotal(result.total)
  //   // //每页条数
  //   // setPageSize(result.size)
  //   //请求完成后要把isLoading修改为false 
  //   setIsLoading(false)
  // }

  //页码列表的数据 getHosSetListRecordsType是一个数组类型 值是records
  const [tableData, setTableData] = useState<getHosSetListRecordsType>([])
  //定义当前页码
  const [current, setCurrent] = useState(1)
  //定义总数据的数量
  const [total, setTotal] = useState(0)

  //定义每页的数量
  const [pageSize, setPageSize] = useState(10)
  //定义缓冲 是否在加载中
  const [isLoading, setIsLoading] = useState(false)
  //定义搜索按钮查询参数     的类型
  const [fieldValue, setsearchHosFinisValues] = useState<searchHosFinisValuesType>({})
  // 定义重新渲染状态
  const [reRender, setRerender] = useState(1)
  //定义控制批量删除按钮状态 //开始状态是禁用的所以初始值值为true
  const [isSeletor, setIsSeletor] = useState(true)
  //定义一个 保存批量选中的ids的状态
  const [dataIds, setDataIds] = useState<Key[]>([])
  //react做路由跳转
  const navigate = useNavigate()

  //当组件加载的时候,开始请求分页列表的数据
  //注意:异步函数不能作为useEffect的参数,因为useEffect可能会书写return一个函数起到清理作用,如果是异步函数,则return就是异步的了
  useEffect(() => {
    //在请求开始之前,设置isLoading为true
    setIsLoading(true)
    //封装一个请求函数才可以,记得后续调用
    //渲染列表函数
    const getHosSetList = async () => {
      const result = await getHosSetListRequest({
        //请求的页码
        page: current,
        //请求的页码的数量
        limit: pageSize,
        //查询输入框的
        ...fieldValue
      });
      // console.log(result, "result");

      //1.把得到的结果中records数据(医院列表的数组)设置给state
      setTableData(result.records)
      //2.把得到的结果中 数据的总长度设置给state
      setTotal(result.total)
      // //每页条数
      // setPageSize(result.size)
      //请求完成后要把isLoading修改为false 
      setIsLoading(false)
    }
    getHosSetList();
  }, [current, pageSize, fieldValue, reRender])

  // --------------------------------------
  //处理事件函数
  //搜索按钮处理函数
  //fieldValue 由表单收集输入内容组成一个对象
  const searchHosFinishHandle = (fieldValue: searchHosFinisValuesType) => {
    setsearchHosFinisValues(fieldValue)
  }
  //添加按钮跳转处理函数
  const addHospitalGo = () => {
    navigate('/syt/hospital/AddHosSet')
  }
  // //添加按钮跳转处理函数
  // const changeHospitalGO = () => {
  //   navigate('/syt/hospital/UpdateHosSet')
  // }

  // //删除列表处理函数
  // const deleteList = (id: string) => {
  //   //高阶函数 返回的函数才是真正的事件处理函数
  //   return async () => {
  //     // 发送请求，只会删除服务器数据，客户端数据没变
  //     await deleteHosSetRequest(id);
  //     //组件提示信息
  //     message.success("删除医院成功");
  //     // 重新获取最新医院列表即可
  //     getHosSetList()
  //   };
  // };
  // //删除列表处理函数二
  const deleteList = (id: string) => {
    return async () => {
      //发送删除请求
      await deleteHosSetRequest(id)
      //提示信息
      message.success("删除医院成功");
      //重新渲染
      setRerender(reRender + 1)
    }
  }
  //批量删除事件函数
  const deleteAll = async () => {
    
    //发送批量删除请求
    await allDeleteRequest(dataIds)
    //提示信息
    message.success("批量删除成功")
    //重新渲染
    setRerender(reRender + 1)
    //还原批量删除按钮状态
    setIsSeletor(true)

  }






  //colums是控制表格的字段有哪些,title属性就是当前的字段名称,dataIndex就是用来和将来的数据进行一一对应的
  //render函数的第三个参数是当前的数据的下标
  //正常要求columns中要有key 但是如果书写了dataIndex 则可以省略key
  const columns = [
    /* 
    Column#
    列描述数据对象，是 columns 中的一项，Column 使用相同的 API。
    */
    {
      title: '序号',
      render(_: any, __: any, index: number) {
        return index + 1
      },
      /* 
        React 需要的 key，如果已经设置了唯一的 dataIndex，可以忽略这个属性
      */
      dataIndex: 'index',
      width: 60
    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
    },
    {
      title: '医院编号',
      dataIndex: 'hoscode',
    },
    {
      title: 'api基础路径',
      dataIndex: 'apiUrl',
    },
    {
      title: '签名',
      dataIndex: 'signKey',
    },
    {
      title: '联系人姓名',
      dataIndex: 'contactsName',
    },
    {
      title: '联系人手机',
      dataIndex: 'contactsPhone',
    },
    {
      title: '操作',
      dataIndex: 'name',
      fixed: "right" as "right",
      render(_: any, data: any) {
        // 请求过来的数据 解构出ID
        const { id } = data
        // console.log(id);
        return (
          <div>
            <Tooltip title="修改按钮">
              <Button type='primary' icon={<EditOutlined />}
                //更新列表按钮 通过id跳转
                onClick={() => { navigate(`/syt/hospital/UpdateHosSet/${id}`) }}
                className={style.mr}
              ></Button>
            </Tooltip>
            <Tooltip title="删除按钮">
              <Button type='primary'
                //删除按钮
                onClick={deleteList(id)}
                danger icon={<DeleteOutlined />}>
              </Button>
            </Tooltip>

          </div >
        )
      }
    }
  ];


  // ----------------------------------
  return (
    <Card>
      <div className={style.outer} >
        <Form name="horizontal_login"
          layout="inline"
          ///searchHosFinishHandle 表单提交的回调函数
          onFinish={searchHosFinishHandle}
        >
          <Form.Item
            name="hosname"
          >
            <Input placeholder="医院名称" />
          </Form.Item>
          <Form.Item
            name="hoscode"
          >
            <Input placeholder="医院编号" />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            {/* htmlType="submit" 触发表单提交  */}
            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
              查询
            </Button>
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="default" htmlType="reset">
              清空
            </Button>
          </Form.Item>
        </Form>

        <div className={style.mt}>
          <Button type='primary' className={style.mr} onClick={addHospitalGo}>添加</Button>
          <Button type="primary"
            onClick={deleteAll}
            danger
            //控制批量删除按钮状态
            disabled={isSeletor}
          >批量删除</Button>
        </div>

        <Table className={style.mt}
          columns={columns}
          dataSource={tableData}
          // dataSource={data}
          //列表边框
          bordered
          //横向滚动条
          scroll={{ x: 1400 }}
          //给列表的每一项添加一个hoscode作为Key
          // rowKey={"hoscode"}
          rowKey="id"
          //页码加载等待状态
          loading={isLoading}
          //批量删除按钮
          rowSelection={
            {
              onChange(ids: Key[]) {
                // console.log(ids); //所有id组成的数组
                // console.log(datas)//所有列表数据组成的数组
                //设置控制批量删除按钮state的状态
                setIsSeletor(!ids.length)
                //当选项框被修改的时候,实时的修改保存所有被选中id的状态
                setDataIds(ids)
              }
            }
          }
          pagination={{
            // 页码的配置：当前的页码
            current,
            // 总数据的数量
            total,
            // 每页条数
            pageSize,
            // 展示更改每页条数的选项（默认total大于条的时候开启）
            pageSizeOptions: [3, 8, 10, 15],
            // 是否直接开启更新每页条数的选项
            showSizeChanger: true,
            onChange(page, pageSize) {
              // console.log(page,"page");
              // console.log(pageSize,"pageSize");
              //设置点击后的当前页码
              setCurrent(page)
              //设置点击后的每页条数
              setPageSize(pageSize)
            },
            showTotal(total) {
              return `总共有${total}数据`
            }
          }}
        />
      </div>
    </Card>
  )
}
